<template>
  <view class="detail-container" style="background-color: #f5f9ff; min-height: 100vh;">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" style="padding: 15px 20px; display: flex; align-items: center; background-color: #fff; border-bottom: 1px solid #eee;">
      <view @click="goBack" style="width: 24px; height: 24px;">
        <text style="font-size: 24px;">←</text>
      </view>
      <view style="flex: 1; text-align: center;">
        <text style="font-size: 18px; font-weight: bold;">员工业绩</text>
      </view>
      <view style="width: 24px;"></view>
    </view>

    <!-- 员工信息区域 -->
    <view style="padding: 15px 20px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5;">
      <text style="font-size: 16px; font-weight: bold;">{{employeeData.name}}</text>
      <text style="font-size: 14px;">{{employeeData.position}}</text>
    </view>

    <!-- 业绩走势区域 -->
    <view class="chart-section" style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px;">
      <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <text style="font-size: 16px; font-weight: bold;">业绩走势</text>
        <picker mode="selector" :range="weeks" range-key="name" @change="weekChange">
          <view style="border: 1px solid #ddd; border-radius: 15px; padding: 5px 10px; font-size: 14px; color: #1a73e8;">
            {{currentWeek.name}} <text style="font-size: 12px;">▼</text>
          </view>
        </picker>
      </view>
      
      <!-- 销售业绩行 -->
      <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <text style="font-size: 12px; color: #1a73e8;">销售业绩</text>

      </view>
      
      <!-- 图表区域 -->
      <view style="height: 180px; display: flex; justify-content: center; align-items: center; background-color: #f5f9ff; border-radius: 8px; margin-bottom: 15px;">
        <text style="font-size: 32px; color: #1a73e8; font-weight: bold;">{{employeeData.performance.toFixed(2)}}</text>
      </view>
      
      <!-- 日期轴 -->
      <view style="display: flex; justify-content: space-between;">
        <text style="font-size: 12px; color: #999;">周一</text>
        <text style="font-size: 12px; color: #999;">周二</text>
        <text style="font-size: 12px; color: #999;">周三</text>
        <text style="font-size: 12px; color: #999;">周四</text>
        <text style="font-size: 12px; color: #999;">周五</text>
        <text style="font-size: 12px; color: #999;">周六</text>
        <text style="font-size: 12px; color: #999;">周日</text>
      </view>
    </view>

    <!-- 交易明细 -->
    <view class="transaction-section" style="background-color: #fff; margin: 15px; border-radius: 12px; padding: 15px;">
      <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 15px;">交易明细</text>
      
      <view v-for="(item, index) in employeeData.transactions" :key="index" 
            style="padding: 12px 0; border-bottom: 1px solid #f5f5f5;">
        <view style="display: flex; justify-content: space-between; align-items: center;">
          <text style="font-size: 14px; color: #000;">订单-{{item.orderId}}</text>
          <text style="font-size: 16px; font-weight: bold;">{{item.amount.toFixed(2)}}</text>
        </view>
        <view style="display: flex; justify-content: space-between; margin-top: 8px;">
          <text style="font-size: 12px; color: #07c160;">{{formatTime(item.time)}}</text>
          <text style="font-size: 12px; color: #07c160;">交易成功</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weeks: [
        { name: '本周', value: 0 },
        { name: '上周', value: 1 },
        { name: '上上周', value: 2 }
      ],
      currentWeek: { name: '本周', value: 0 },
      employeeData: {
        name: '',
        position: '',
        performance: 0,
        transactions: []
      }
    }
  },
  onLoad(options) {
    if(options.employee) {
      this.employeeData = JSON.parse(decodeURIComponent(options.employee))
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    formatTime(fullTime) {
      return fullTime.split(' ')[1]
    },
    weekChange(e) {
      this.currentWeek = this.weeks[e.detail.value]
      // 这里可以添加根据周数获取不同数据的逻辑
    }
  }
}
</script>

<style>
/* 全局样式 */
.detail-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 最后一个交易项无下边框 */
.transaction-section view:last-child {
  border-bottom: none !important;
}

/* 统一圆角 */
.chart-section, .transaction-section {
  border-radius: 12px;
}
</style>